<template>
  <div>
    <div class="mb_8">
      <el-button type="primary" size="medium" @click="editOfAdd()">新增日程</el-button>
    </div>

    <el-table size="mini" :data="tableData" class="gl_table_noBorder mb_17" style="width: 100%">
      <el-table-column label="" width="40" />
      <el-table-column label="开始时间" width="180">
        <template slot-scope="{row}">
          <span>{{ row.startTime && row.startTime.substring(0, 10) + " " + row.startTime.substring(11, 16) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" width="180">
        <template slot-scope="{row}">
          <span>{{ row.endTime && row.endTime.substring(0, 10) + " " + row.endTime.substring(11, 16) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="事件" width="220" />
      <el-table-column
        label="地点"
        :tooltip="true"
        width="260"
      >
        <template slot-scope="{row}">
          <el-popover
            placement="top"
            width="400"
            trigger="hover"
            :open-delay="400"
            :content="row.location"
          >
            <div slot="reference" class="gl_ellipsis">{{ row.location || '--' }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        :tooltip="true"
        min-width="240"
      >
        <template slot-scope="{row}">
          <el-popover
            placement="top"
            width="400"
            trigger="hover"
            :open-delay="400"
            :content="row.comment"
          >
            <div slot="reference" class="gl_ellipsis">{{ row.comment || '--' }}</div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column width="180" label="操作">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="editOfAdd(row, 'edit')">编辑</el-button>
          <el-button size="mini" type="text" style="color:#FF3434" @click="clickDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <addOrEditSchedule ref="addOrEditSchedule" @insert="scheduleInsert" @update="scheduleUpdate" />

    <!-- 分页 -->
    <!-- <el-row class="gl_pt_20" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_TrainTrainningScheduleQO.Page"
        :page-size="Api_GET_TrainTrainningScheduleQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row> -->
  </div>
</template>

<script>
import addOrEditSchedule from './addOrEditSchedule';
import { translateByCode } from '@/lib/getTransData';
import {
  Api_GET_TrainTrainningScheduleQO
} from '@/lib/form/train/swaggerForm';
import { api_GET_TrainTrainningSchedule, api_POST_TrainTrainningSchedule, api_PUT_TrainTrainningScheduleId, api_DELETE_TrainTrainningScheduleId } from '@/extend/api/trainswaggerApi/app';
export default {
  components: {
    addOrEditSchedule
  },
  props: {
    gameId: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      Api_GET_TrainTrainningScheduleQO: new Api_GET_TrainTrainningScheduleQO(),
      tableData: [],
      totalPage: 1,
      trainId: '',
      rowId: '',
      tableLoading: false
    };
  },
  created() {
    this.trainId = this.gameId || this.$route.params.id;
    this.refreshList();
  },
  methods: {
    // 刷新列表
    refreshList(page) {
      this.tableLoading = true;
      this.Api_GET_TrainTrainningScheduleQO.TrainningId = this.trainId;

      // this.Api_GET_TrainTrainningScheduleQO.Page = page || 1;
      // this.Api_GET_TrainTrainningScheduleQO.SkipCount = (this.Api_GET_TrainTrainningScheduleQO.Page - 1) * this.Api_GET_TrainTrainningScheduleQO.MaxResultCount;
      api_GET_TrainTrainningSchedule(this.Api_GET_TrainTrainningScheduleQO).then(res => {
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        this.tableLoading = false;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 添加或修改酒店
    editOfAdd(row, type) {
      this.rowId = row ? row.id : '';
      this.$refs.addOrEditSchedule.open(row, type);
    },
    // 添加
    scheduleInsert(data) {
      const _this = this;

      data.trainningId = this.trainId;
      api_POST_TrainTrainningSchedule(data).then(res => {
        this.$message({
          // 添加成功！
          message: '添加成功！',
          type: 'success'
        });
        _this.$refs.addOrEditSchedule.dialogVisible = false;
        _this.$refs.addOrEditSchedule.submitLoading = false;
        this.refreshList();
      }, error => {
        _this.$refs.addOrEditSchedule.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 修改
    scheduleUpdate(data) {
      const _this = this;
      data.trainningId = this.trainId;
      api_PUT_TrainTrainningScheduleId(this.rowId, data).then(res => {
        this.$message({
          // 修改成功！
          message: '修改成功！',
          type: 'success'
        });
        _this.$refs.addOrEditSchedule.dialogVisible = false;
        _this.$refs.addOrEditSchedule.submitLoading = false;
        this.refreshList();
      }, error => {
        _this.$refs.addOrEditSchedule.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 删除按钮
    clickDelete(row) {
      // const _this = this;
      // 您确定要删除 xxx 吗？ zh
      const _confirmStr = ` ${translateByCode('alert.wantDelete')} [ ${row.title} ] ${translateByCode('alert.ma')}`;
      this.$confirm(_confirmStr, translateByCode('alert.warning'), {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        api_DELETE_TrainTrainningScheduleId(row.id).then(res => {
          this.$message({
            type: 'success',
            // 删除成功！
            message: translateByCode('alert.deleteSuccessfully')
          });
          this.refreshList();
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_TrainTrainningScheduleQO.MaxResultCount = MaxResultCount;
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
  .table_photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  .table_name {
    line-height: 18px;
  }
  .mb_8 {
    margin-bottom: 8px;
  }
  .mb_17 {
    margin-bottom: 17px;
  }
  .dialog-footer {
    text-align: center;
  }
</style>
